<template>
  <div>
    <div class="rightcon">
      <!-- 房间列表 -->
      <div class="hot_rooms playing_songs my_songs search_songs">
        <h3>
          我的个人中心
          <div class="btn" type="primary">退出登录</div>
        </h3>

        <div class="con">
          <div class="userimg">
            <img :src="myinfo.user_head" alt="" />
            <h3><span class="id">ID: </span>{{ myinfo.user_id }}</h3>
          </div>

          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="昵称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="签名">
              <el-input v-model="form.notice"></el-input>
            </el-form-item>

            <el-form-item label="摸摸">
              <el-input
                placeholder="请输入一个二级域名前缀"
                v-model="form.two"
              ></el-input>
            </el-form-item>

            <el-form-item label="性别">
              <el-select v-model="form.region" placeholder="男生">
                <el-option label="男生" value="0"></el-option>
                <el-option label="女生" value="1"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="密码">
              <el-input
                placeholder="你的密码,不修改请留空"
                v-model="form.password"
              ></el-input>
            </el-form-item>
          </el-form>

          <div class="btn" @click="save">保存</div>
        </div>
      </div>
    </div>
    <!-- <home></home> -->
  </div>
</template>

<script>
import {
  search,
  songList,
  mySongList,
  addSong,
  hotRooms,
} from "@/api/search/index";
import { getMyInfo, updateMyInfo } from "@/api/room/index";
import home from "@/views/home";
export default {
  components: {
    home,
  },

  data() {
    return {
      form: {
        name: "",
        notice: "",
        two: "",
        paddword: "",
        region: "",
      },
      value1: "",
      value2: "",
      roomdata: [],
      messagelist: [],
      inputtext: "",
      sortdata: [
        {
          path: "search_songs",
          icon: "el-icon-s-claim",
          title: "点歌",
        },
        {
          path: "playing_songs",
          icon: "el-icon-s-management",
          title: "已点",
        },
        {
          path: "my_songs",
          icon: "el-icon-s-order",
          title: "歌单",
        },
        {
          path: "hot_rooms",
          icon: "el-icon-s-home",
          title: "房间",
        },
      ],
      input: "",
      songslist: [],
      alreadylist: [],
      mysongslist: [],
      hotrooms: [],
      myinfo: [],
    };
  },

  created() {
    //获取自己的个人信息
    getMyInfo({
      plat: "pc",
      access_token: localStorage.getItem("access_token"),
      version: 10000,
    }).then((res) => {
      console.log(res);
      this.myinfo = res.data;
      this.form.name = decodeURI(res.data.user_name);
      this.form.notice = res.data.user_remark;
    });
    // 获取热门房间
    hotRooms({
      access_token: localStorage.getItem("access_token"),
      plat: "pc",
      version: 10000,
    }).then((res) => {
      console.log(res);
      this.hotrooms = res.data;
    });
  },

  mounted() {},

  methods: {
    //   保存个人信息
    save() {
      console.log("object");
      this.$notify({
        title: "添加成功",
        message: "肯定没成功,因为我没接API",
        type: "success",
      });
    },
    // 跳转到目标ID的房间
    toroom() {
      console.log(this.input);
      var index = false;
      index = false;
      this.hotrooms.forEach((el) => {
        if (el.room_id == this.input) {
          index = true;
        } else {
        }
      });
      console.log(index);
      if (index) {
        localStorage.setItem("room_id", this.input);
        this.$router.push({ name: "search_songs" });
      } else {
        this.$notify({
          title: "查找失败",
          message: "暂无查询此房间",
          type: "error",
        });
        this.input = "";
      }
    },
    // 左侧切换右侧
    change(id) {
      console.log(id);
      localStorage.setItem("room_id", id);
      this.$router.push({ name: "search_songs" });
    },
    // 搜索歌曲
    getsongs() {
      search({
        keyword: this.input,
        access_token: localStorage.getItem("access_token"),
        plat: "pc",
        version: 10000,
      }).then((res) => {
        console.log(res);
        this.songslist = res.data;
      });
    },
    // 获取已点歌曲
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
.rightcon {

  // 搜索歌曲列表
  .search_songs {
      border-radius: 0 20px 20px 0;
  overflow: hidden;
    width: 360px;
    height: 800px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 22;
  }
  h3 {
    height: 30px;
    width: 320px;
    text-align: left;
    padding: 10px 20px;
    background-color: #fff;
  }
  h3 {
    .btn {
      float: right;
      font-size: 10px;
      background-color: #f56c6c;
      padding: 6px 12px;
      color: #fff;
      border-radius: 4px;
      font-weight: 400;
      cursor: pointer;
    }
  }
  .con {
    width: 360px;
    height: 740px;
    background-color: #fff;
    overflow: auto;
    margin-top: 10px;
    position: relative;
    .userimg {
      margin-top: 20px;
      margin-bottom: 40px;
      h3 {
        text-align: center;
        margin: 0 auto;
        padding: 0;
        width: 100px;
        color: #ff6700;
        font-weight: 900;
        font-size: 20px;
        .id {
          font-weight: 600;
          font-size: 16px;
          color: #333;
        }
      }
    }
    .one {
      padding: 0px 80px;
      margin-top: 20px;
      .title {
        margin: 0 30px;
      }
    }
    .el-form-item {
      margin-top: 10px;
      .el-input {
        width: 240px;
      }
      .el-select {
        width: 240px;
      }
    }
    .btn {
      width: 200px;
      margin: 0 auto;
      margin-top: 60px;
      border-radius: 10px;
      padding: 12px 30px;
      color: white;
      background-color: #5eadff;
    }
  }
}
</style>